import React, { memo } from "react";
import { useHistory } from "react-router-dom";

import { useDispatch } from "react-redux";
import {
  setNoteIdAction,
  setNoteUserIdAction,
} from "@/pages/detail/store/actionCreators";
import { setAsyncOtherUserInfoAction } from "@/pages/other-user/store/actionCreators";

import { CardWrapper, CardContent } from "./style";
import { HeartOutlined } from "@ant-design/icons";

export default memo(function Card(props) {
  const { picurl, theme, avatar, nickName, allLove, noteId, userId } =
    props.data;
  const history = useHistory();
  const dispatch = useDispatch();
  // 处理点击事件 当点击图片后 可以展示详情页
  // 这个方法在首页 以及 我的 界面需要使用
  const jumoToDetailPage = () => {
    dispatch(setNoteIdAction(noteId));
    // 这个userId是笔记的发布者的id
    dispatch(setNoteUserIdAction(userId));
    dispatch(setAsyncOtherUserInfoAction(userId));
    history.push("/detail");
  };

  return (
    <CardWrapper onClick={jumoToDetailPage}>
      <div className="picture">
        <img src={picurl} alt="" />
      </div>
      <CardContent>
        <div className="title">{theme}</div>
        <div className="info">
          <div className="info-left">
            <img src={avatar} alt="" className="avatar" />
            <span className="nickname">{nickName}</span>
          </div>
          <div className="like">
            <i>
              <HeartOutlined />
            </i>
            <span>{allLove}</span>
          </div>
        </div>
      </CardContent>
    </CardWrapper>
  );
});
